<template>
	<view>
		<u-popup  v-model="phoneshow" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closephone">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closephone">
                        <image class="icon_gbcha" src="@/pages_client/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <image class="img_aq" src="@/pages_client/static/img/img_aq.png" mode="" />
                    <text class="gouname">与{{info.boss.nickname}}老板沟通</text>
                    <view class="chaka">
                        <text class="chaname">如双卡双待，请用下方号码拨打</text>
                        <text class="phonenum" v-if="info.boss.mobile">{{info.boss.mobile}}</text>
                        <view class="xiugai">
                            <text class="noben">这不是本机号码？</text>
                            <text class="xiu" @click="getxiugai">去修改 ></text>
                        </view>
                    </view>
                    <view class="dianbtn" @click="getphone" v-if="!chakan">
                        <text class="bm">电话报名</text>
                        <text class="bmmaio" v-if="Number(info.people) - Number(info.count)">今日剩余{{ Number(info.people) - Number(info.count) }}个名额</text>
                    </view>
                    <view class="dianbtn" @click="getphonetwo" v-if="chakan">
                        <text class="bm">拨打电话</text>
                        <!-- <text class="bmmaio" v-if="Number(info.people) - Number(info.count)">今日剩余{{ Number(info.people) - Number(info.count) }}个名额</text> -->
                    </view>
                    <view class="bzhang">
                        <image class="icon_ts" src="@/pages_client/static/img/icon_ts.png" mode="" />
                        <text class="zhiname">为保障服务质量，您的通话可能会被录音</text>
                    </view>
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'TelephonePop',
		props: {
			phoneshow: {
				type: Boolean,
				default: false
			},
            info:{
                type:Object,
                default:{}
            },
            chakan:{
                type: Boolean,
				default: false
            }

		},
		data() {
			return {
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closephone(){
                this.$emit("closephone")
            },
            getphone(){
                let that = this
                uni.makePhoneCall({
					phoneNumber: this.info.boss.mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
                        // 请求接口 报名成功
                        that.getphonesucess()
					},
					fail: function() {
                        that.getphonesucess()
						console.log("拨打电话失败！")
					}
				})
            },
            getphonesucess(){
                this.$emit("getphonesucess")
            },
            getxiugai(){
                this.navrouter("/pages/TPage/EditPhone");
            },
            getphonetwo(){
                let that = this
                uni.makePhoneCall({
					phoneNumber: this.info.boss.mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
                        // 请求接口 报名成功
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
            },

		}
	};
</script>
<style>
.u-mode-center-box{
    background-color: transparent !important;
}
</style>
<style lang="scss" scoped>
	.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx;
        height: 800rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .gouname{
                font-weight: 500;
                font-size: 36rpx;
                color: #111111;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
</style>
